<template>
  <div class="listTemplate">
    <div class="listDivCls">
      <section>
        <p>电子游戏</p>
        <p><span>Casino</span></p>
      </section>
    </div>
    <div class="listDivCenter">
      <div class="listGameTab">
        <div class="GameTab">
          <ul>
            <li v-for="(tab,tIndex) in gameTab" :class="{'on': tIndex === tabIndex}" @click="navTab(tIndex)"><p>{{tab.txt}}</p></li>
          </ul>
        </div>
        <div class="GameSeach">
          <section>
            <p class="inpt"><input type="text" v-model="gameInputText" placeholder="请输入游戏名称"></p>
            <p class="btn" @click="seachBtn">
              <a href="javascript:void(0)">搜索</a>
            </p>
          </section>
        </div>
      </div>
      <div class="GameListFour">
        <ul>
          <li v-for="activity in activityData || []">
            <article class="GameArtciel">
              <section>
                <img :src="activity.img" alt="">
              </section>
              <section>
                {{activity.name}}
              </section>
              <div class="actGameBack">
                <p @click="gameUrl(activity.gamecode)">开始游戏</p>
              </div>
            </article>
          </li>
        </ul>
      </div>
    </div>
    <div class="listPage">
      <Page :total="totalPage" :pageSize='perPageNum' :current="currentPage" :showTotal='true'
            @on-change="changeCurrentPage"></Page>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        gameTab: [
          {name: "hot", txt: "热门"},
          {name: "fish", txt: "捕猎"},
          {name: "fruit", txt: "水果机"},
          {name: "poker", txt: "棋牌"},
          {name: "slot", txt: "老虎机"},
          {name: "", txt: "全部"},
        ],
        tabIndex: 0,
        actSubmit: {
          pageSize: 10,
          pageNum: 1,
          gameType: "",
          gameName: ""
        },
        activityData: [],
        // 获取链接
        gameStatusSubmit: {
          pages: ""
        },
        gameS: false,
        currentPage: 1,//当前页数
        totalPage: 0,//总条数
        perPageNum: 10,//每页数
        gameInputText: "",
      }
    },
    activated() {
      this.initData();
    },
    deactivated() {
      this.inputStatusInit();
      this.statusInit();
    },
    methods: {
      navTab(index) {
        this.inputStatusInit();
        this.statusInit();
        this.tabIndex = index;
        this.initData();
      },
      // 获取游戏列表数据
      initData() {
        let that = this;
        that.actSubmit.gameType = that.gameTab[that.tabIndex].name;
        that._Util.post(that, that._Api.GET_FAME_PAGE, that.actSubmit, (data)=> {
          if(!data || data.length === 0) {
            that._Util.showAlert(that, "已经没有数据了~");
            return;
          }
          // that.activityData = that.activityData.concat(data || []);
          that.activityData = data.result;
          that.totalPage = data.total;
          that.actSubmit.pageNum += 1;
        });
      },
      // 获取游戏链接
      gameUrl(code) {
        let that = this;
        // 判断是否登录
        if(!that._Util.getItem("loginStatus")) {
          that._Util.showAlert("未登录");
          setTimeout(()=> {
            that.$router.push({name: 'login'});
          }, 2000);
          return;
        }
        let submit = []; // 提交数据
        that.gameStatusSubmit.pages = code;
        submit.push(that.gameStatusSubmit.pages);
        if(that.gameS) return;
        that.gameS = true;
        that._Util.DEMANDGET(that, that._Api.GET_START_GAME_PAGE, submit, '', (data)=> {
          that.gameS = false;
          window.open(data);
        }, (data)=> {
          that.gameS = false;
        });
      },
      
      //当前页数改变
      changeCurrentPage(val) {
        this.currentPage = val;
        this.gameStatusSubmit.pageNum = val;
        this.initData();
      },
      // 初始化
      statusInit() {
        this.actSubmit.pageNum = 1;
        this.activityData = [];
        this.tabIndex = 0;
      },
      // input 初始化
      inputStatusInit() {
        this.gameInputText = "";
        this.actSubmit.gameName = this.gameInputText;
      },
      seachBtn() {
        this.actSubmit.pageNum = 1;
        this.tabIndex = 5;
        this.actSubmit.gameName = this.gameInputText;
        this.initData();
      }
    }
  }
</script>
